<template>
  <!-- 轮播图区域 -->
  <view>
    <swiper autoplay indicator-dots indicator-color="#ccc" indicator-active-color="#ff744d" circular>
      <swiper-item class="swiper_Sub" v-for="item in carouselMapList" :key="item.id">
        <image :src="item.imageUrl"></image>
      </swiper-item>
    </swiper>
  </view>
  <!-- 分类区域 -->
  <view class="classify_List">
    <view class="classify_Item {{index>4 && 'small'}}" v-for="(item, index) in classifyList" :key="index">
      <image :src="item.imageUrl" />
      <view>{{ item.name }}</view>
    </view>
  </view>
  <!-- 搭建你喜欢 -->
  <view>
    <card_list :goodsList="likeList" title='猜你喜欢'></card_list>
    <card_list :goodsList="recommendList" title='人气推荐'></card_list>
  </view>
</template>

<script setup lang="ts">
import { getcarouselMap, getclassify, getLike, getRecommend } from "@/Api/home";
import { onLoad } from "@dcloudio/uni-app"
import { ref } from "vue";
import card_list from '@/components/card_list/card_list.vue'

//定义轮播图数组
const carouselMapList = ref<any>([]);
const classifyList = ref<any>([]);
const likeList = ref<any>([]);
const recommendList = ref<any>([]);

const getcarouselMapApi = async () => {
  try {
    const { data, code } = await getcarouselMap()
    if (code === 200) {
      carouselMapList.value = data
    }
  } catch (e) {
    console.log(e)
  }
}
//获取分类数据
const getclassifyAoi = async () => {
  try {
    const { code, data } = await getclassify()
    if (code === 200) {
      classifyList.value = data
    }
  } catch (e) {

  }
}
//获取猜你喜欢和推荐
const getLikeApi = async () => {
  try {
    const { code, data } =await getLike()
    if (code === 200) {
      likeList.value = data
    }
  } catch (e) {
    console.log(e)
  }
}
const getRecommendApi = async () => {
  try {
    const { code, data } = await getRecommend()
    if (code === 200) {
      recommendList.value = data
    }
  } catch (e) {
    console.log(e)
}
}

onLoad(() => {
  getcarouselMapApi()
  getclassifyAoi()
  getLikeApi()
  getRecommendApi()

})

</script>

<style>
/**index.wxss**/
/* 轮播图样式 */
.swiper_Sub {
  width: 100%;
  height: 300rpx;
}

.swiper_Sub image {
  width: 100%;
  height: 100%;
}

/* 分类布局代码 */
.classify_List {
  display: flex;
  flex-wrap: wrap;
}

.classify_Item {
  display: flex;
  width: 20%;
  flex-wrap: wrap;
  font-size: 26rpx;
  margin-bottom: 20rpx;
}

.classify_Item image {
  height: 88rpx;
  width: 88rpx;
  margin: 10rpx auto;
}

.classify_Item.small image {
  height: 40rpx;
  width: 40rpx;
  margin: auto;
}

.classify_Item view {
  margin: auto 22rpx;
}</style>
